<template>
	<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in imgs">
      	<img :src="item.url"/>
      	
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
export default{
      name:"swiper",
      data(){
      	return{
      		
      	}
      },
      mounted(){
      	this.myswiper();
      },
      methods:{
      	myswiper(){
      		 var swiper = new Swiper('.swiper-container', {
			      pagination: {
			        el: '.swiper-pagination',
		
			      },
			 });
      	}
      },
      props:["imgs"]
     
}
</script>

<style scoped>
	html,
	body {
		position: relative;
		height: 100%;
	}
	
	body {
		background: #eee;
		font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		font-size: 14px;
		color: #000;
		margin: 0;
		padding: 0;
	}
	
	.swiper-container {
		width: 100%;
		height: 100%;
	}
	
	.swiper-slide {
		text-align: center;
		font-size: 18px;
		background: #fff;
		/* Center slide text vertically */
		display: -webkit-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	}
	img{
		width: 100%;
	}
</style>